<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" th:href="@{images/favicon.ico}">
    <title>我们的健身俱乐部</title>
    <!-- Reset CSS -->
    <link href="css/reset.css" th:href="@{css/reset.css}" rel="stylesheet" type="text/css">
    <!-- Bootstrap -->
    <link href="assets/bootstrap/css/bootstrap.min.css" th:href="@{assets/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <!-- Font Awesome -->
    <link href="assets/font-awesome/css/font-awesome.min.css" th:href="@{assets/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
    <!-- Iconmoon -->
    <link href="assets/iconmoon/css/iconmoon.css" th:href="@{assets/iconmoon/css/iconmoon.css}" rel="stylesheet" type="text/css">
    <!-- Lightbox CSS -->
    <link href="assets/lightbox/css/lightbox.css" th:href="@{assets/lightbox/css/lightbox.css}" rel="stylesheet" type="text/css">
    <!-- Owl Carousel -->
    <link href="assets/owl-carousel/css/owl.carousel.min.css" th:href="@{assets/owl-carousel/css/owl.carousel.min.css}" rel="stylesheet" type="text/css">
    <!-- Animate -->
    <link href="css/animate.css" th:href="@{css/animate.css}" rel="stylesheet" type="text/css">
    <!-- Aos -->
    <link href="assets/aos/aos.css" th:href="@{assets/aos/aos.css}" rel="stylesheet" type="text/css">
    <!-- Custom Style -->
    <link href="css/custom.css" th:href="@{css/custom.css}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Start Header -->
<header>
    <!-- Start Header Sec -->
    <div class="container header-sec">
        <div class="row">
            <span class="col-xs-12 col-sm-3 logo"><a href="index.html"><img class="main" th:src="@{images/logo.png}" src="images/logo.png" alt="Fitness Gym"><img class="fix" src="images/logo-fix.png" th:href="@{images/logo-fix.png}" alt="Fitness Gym"></a></span>
            <div class="col-xs-12 col-sm-9 header-right">
                <div class="header_search_outer">
                    <span class="icon-search-icon"></span>
                    <input type="text" value="" placeholder="Search" class="header_search"/>
                </div>
                <!-- Start Navigation -->
                <nav class="navbar navbar-expand-md navbar-dark navbar-custom">
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="/index" th:href="@{/index}">主页</a>
                            </li>
                            <li class="nav-item active">
                                <a class="nav-link" href="/about-us" th:href="@{/about-us}" >关于我们</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/classes" th:href="@{/classes}">我们的课程</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/trainers" th:href="@{/trainers}">教练信息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/contact-us" th:href="@{/contact-us}">加入我们</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <!-- End Navigation -->
            </div>
        </div>
    </div>
    <!-- End Header Sec -->
</header>
<!-- End Header -->

<!-- Start Banner -->
<div class="banner-outer inner-banner  about-us-banner">
    <span class="banner-shadow"></span>
    <div class="container">
        <div class="content" data-aos="fade-down">
            <h1>ABOUT US</h1>
            <div class="breadcrumbs_outer">
                <div class="container">
                    <ul class="breadcrumbs">
                        <li><a href="index" th:href="@{index}">主页</a></li>
                        <li>关于我们</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Banner -->

<!-- Start Cal Info -->
<div class="cal-info-outer">
    <div class="container">
        <div class="cal-info-list">
            <div class="row">
                <div class="col-sm-4 col-xs-12">
                    <div class="cal-info-box">
                        <figure><img src="images/contact-location.png" th:src="@{images/contact-location.png}" alt=""></figure>
                        <p>浙江省 杭州市 江干区 浙江水利水电学员 15栋101室</p>
                    </div>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="cal-info-box">
                        <figure><img src="images/contact-cal.png" th:src="@{images/contact-cal.png}" alt=""></figure>
                        <p>
                            <a href="">(+1) 4008 823 823</a><br/>
                            <a href="">(+1) 4008 823 823</a>
                        </p>
                    </div>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="cal-info-box">
                        <figure><img src="images/contact-massage.png" th:src="@{images/contact-massage.png}" alt=""></figure>
                        <p><a href="mailto:info@fitnessgym.com">浙江水利水电官网</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Cal Info sec -->

<!-- Start About Top Sec -->
<div class="about-top-outer">
    <div class="container">
        <div class="row">
            <div class="col-sm-7 col-xs-12">
                <div class="about-top-left">
                    <h3>保持专注 <span>维持身体 &amp; 健康</span></h3>
                    <p>懒惰是很奇怪的东西，它使你以为那是安逸，是休息，是福气；但实际上它所给你的是无聊，是倦怠，是消沉；它剥夺你对前途的希望，割断你和别人之间的友情，使你心胸日渐狭窄，对人生也越来越怀疑。</p>
                    <p>有时候一旦你开始跑步，就只跑了10分钟，便会顺其自然完成整段路线，并获得极大的满足感。当没有动力的时候，想想之前跑完每段路程后的喜悦及轻松心情，你的犹豫就会烟消云散，开始只往前跑。</p>
                    <p>明明每天都无所事事，却也感觉不到半点轻松。不如去运动吧！</p>
                    <ul class="">
                        <li>
                            <h4><i class="fa fa-check-square-o"></i>我们有知识丰富的健身教练</h4>
                            <p>当你第一次步入健身房，你会无助，会尝试各种器材，动一动哑铃，然后就结束训练，那样你只会一无所获。我们的教练可以帮你以最快的形式走进健身这条路。</p>
                        </li>
                        <li>
                            <h4><i class="fa fa-check-square-o"></i>现代化的健身馆 &amp;健身设施</h4>
                            <p>我们健身房的器械由您想得到和想不到的，以及操课房、单车房、洗浴房等等。可以帮助你完成的所有训练需求。</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-5 col-xs-12">
                <figure class="about-top-right"><img src="images/about-fig.png" th:href="@{images/about-fig.png}" alt=""></figure>
            </div>
        </div>
    </div>
</div>
<!-- End About Top sec -->

<!-- Start Professional -->
<div class="professional-outer">
    <div class="container">
        <div class="professional-list">
            <div class="row">
                <div class="col-sm-4 col-xs-12">
                    <div class="professional-box">
                        <figure><img src="images/corses-icon.png" th:src="@{images/corses-icon.png}" alt=""></figure>
                        <h4>每周40门课程</h4>
                        <p>众多的公共课，可以帮助会员们在自主运动的同事，感受到一起运动的快乐与满足感。</p>
                    </div>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="professional-box">
                        <figure><img src="images/professional-icon.png" th:src="@{images/professional-icon.png}" alt=""></figure>
                        <h4>6名专业培训师</h4>
                        <p>不管您有什么样的需求，增肌、减脂、塑形等等，我们的专业培训师都会帮助你。</p>
                    </div>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="professional-box">
                        <figure><img src="images/effective-icon.png" th:src="@{images/effective-icon.png}" alt=""></figure>
                        <h4>有效的小组培训</h4>
                        <p>如果您在这之前有什么方面的问题，我们的小组会帮你制定一份适合您的训练模式。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Professional sec -->

<!-- Start Footer -->
<footer class="footer">
    <!-- Start Footer top -->
    <div class="footer-top">
        <div class="container">
            <div class="row">
                <div class="col-sm-4 col-xs-12">
                    <div class="contact-us">
                        <h3>关于</h3>
                        <p>来成为我们健身俱乐部的一员吧，拥有你自己的会员账号，与大家在健身圈里交流自己的训练成果，记录你的身体变化。</p>
                        <p><i class="fa fa-map-marker" aria-hidden="true"></i>浙江水利水电学院</p>
                        <a href="mailto:fitnessgym@gmail.com"><i class="fa fa-envelope" aria-hidden="true"></i>fitnessgym@gmail.com</a>
                        <a href=""><i class="fa fa-phone" aria-hidden="true"></i>+8008-823-823</a>
                    </div>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="newletter">
                        <h3>通讯</h3>
                        <p>注册我们的邮件列表以获取最新更新和优惠</p>
                        <div class="search-block clearfix">
                            <input name="Search" type="text" placeholder="Enter Your Email">
                            <button class="search"><span class="fa fa-long-arrow-right"></span></button>
                        </div>
                        <ul class="follow-us clearfix">
                            <li><a href="#" class="fa fa-facebook"></a></li>
                            <li><a href="#" class="fa fa-twitter"></a></li>
                            <li><a href="#" class="fa fa-linkedin"></a></li>
                            <li><a href="#" class="fa fa-instagram"></a></li>
                            <li><a href="#" class="fa fa-youtube-play"></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <h3>大会员们</h3>
                    <ul class="flicker-box clearfix">
                        <li><a href="images/flic1B.png" th:href="@{images/flic1B.png}"><img src="images/flic1.png" th:src="@{images/flic1.png}"  alt=""></a></li>
                        <li><a href="images/flic2B.png" th:href="@{images/flic2B.png}"><img src="images/flic2.png"  th:src="@{images/flic2.png}" alt=""></a></li>
                        <li><a href="images/flic3B.png" th:href="@{images/flic3B.png}"><img src="images/flic3.png"  th:src="@{images/flic3.png}" alt=""></a></li>
                        <li><a href="images/flic4B.png" th:href="@{images/flic4B.png}"><img src="images/flic4.png"  th:src="@{images/flic4.png}" alt=""></a></li>
                        <li><a href="images/flic5B.png" th:href="@{images/flic5B.png}"><img src="images/flic5.png" th:src="@{images/flic5.png}" alt=""></a></li>
                        <li><a href="images/flic6B.png" th:href="@{images/flic6B.png}"><img src="images/flic6.png"  th:src="@{images/flic6.png}" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Footer top -->

    <!-- Copy Rights -->
    <div class="copy-rights-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <p>© 2018 - All rights <a href="http://www.baidu.com/" title="17sucai">Reserved</a></p>
                </div>
            </div>
        </div>
    </div>
    <!-- End Copy Rights -->
</footer>
<!-- End Footer -->

<!-- Scroll to top -->
<a href="#" class="scroll-top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>


</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js" th:href="@{js/jquery.min.js}"></script>
<!-- Bootstrap JS -->
<script src="assets/bootstrap/js/bootstrap.min.js" th:href="@{assets/bootstrap/js/bootstrap.min.js}"></script>
<!-- Lightbox JS -->
<script src="assets/lightbox/js/lightbox.js" th:href="@{assets/lightbox/js/lightbox.js}"></script>
<!-- Owl Carousal JS -->
<script src="assets/isotope/js/isotope.min.js" th:href="@{assets/isotope/js/isotope.min.js}"></script>
<!-- Owl Carousal JS -->
<script src="assets/owl-carousel/js/owl.carousel.min.js" th:href="@{assets/owl-carousel/js/owl.carousel.min.js}"></script>
<!-- Aos JS -->
<script src="assets/aos/aos.js" th:href="@{assets/aos/aos.js}"></script>
<!-- CounterUp JS -->
<script src="assets/counterup/counterup.min.js" th:href="@{assets/counterup/counterup.min.js}"></script>
<script src="assets/counterup/waypoints.min.js" th:href="@{assets/counterup/waypoints.min.js}"></script>
<!-- Custom JS -->
<script src="js/custom.js" th:href="@{js/custom.js}"></script>
</html>